<template>
    <fieldset>
        <legend>二级联动</legend>
        省：
        <select v-model="sel1" @change="provinceChange(sel1)">
            <option v-for="item in province" :key="item.id" :value="item.id">{{ item.name }}</option>
        </select>
        市：
        <select v-model="sel2" @change="cityChange(sel2)">
            <option v-for="item in city " :key="item.id" :value="item.id">{{ item.name }}</option>
        </select>
        区：
        <select v-model="sel3">
            <option v-for="item in area" :key='item.id' :value="item.id">{{ item.name }}</option>
        </select>
    </fieldset>
</template>
<script>
import * as api from '@/api/select'
export default {
    data() {
        return {
            province: [],
            city: [],
            area: [],
            sel1: 1,
            sel2: '',
            sel3: ''

        }
    },
    mounted() {
        api.fetchData()
            .then(res => {
                console.log(res)
                this.province = res
                let pid = res[0].id;
                this.provinceChange(pid)

            })
    },
    methods: {
        provinceChange(pid) {

            api.fetchCity(pid)
                .then(res => {
                    this.city = res
                    if (res.length > 0) {
                        this.sel2 = res[0].id

                        let ee = res[0].id;
                        this.cityChange(ee)
                    }


                })
        },
        cityChange(ee) {
            api.fetchArea(ee)
                .then(res => {
                    this.area = res
                    if (res.length > 0) {
                        this.sel3 = res[0].id
                    }
                })
        }
    },



}</script>

<style>
select {
    width: 100px;
    height: 30px;
    margin: 0 10px;
}
</style>